import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Table } from 'antd';
import style from './t1.less';

const columns = [
	{
		title: '头像',
		dataIndex: 'githubAvatar',
		rowKey: 'githubAvatar',
		width: 60,
		render: href => <img src={href} alt="" style={{ width: 45, height: 45, borderRadius: '100%' }} />
	}, {
		title: '姓名',
		dataIndex: 'nickName',
		rowKey: 'nickName',
	}, {
		title: 'github用户名',
		dataIndex: 'githubUsername',
		rowKey: 'githubUsername',
	}, {
		title: 'githubId',
		dataIndex: 'githubId',
		rowKey: 'githubId'
	}
];


@inject('userStore')
@observer
class T1 extends Component {

	componentDidMount() {
		this.props.userStore.getList();
	}
	render() {
		const userList = this.props.userStore.userList;
		return (
			<div className={style.t}>
				<Table className="animated slideInRight" dataSource={userList} columns={columns} bordered={true} />
			</div>
		);
	}

}

export default T1;